<template>
	<div style="width:100%">
		<div class="table-admin-container  layout-padding w100">
			<div class="table-container table-admin-padding layout-padding-view layout-padding-auto">
                <el-card :body-style="{display:'flex', flexDirection: 'column', height:'100%', position: 'relative',overflow: 'hidden',padding:'0'}">
                    <template #header>
                        <div class="card-header">
                            智能助手
                        </div>
                    </template>
                    <el-row>
                        <el-col :span="3">
                            <div style="margin: 20px 10%;">
                                <div>
                                    <el-button type="primary" :icon="Plus" style="width: 100%;" round>新建对话</el-button>
                                </div>
                                <div style="padding: 20px 0 0 0; font-family: Microsoft YaHei;font-weight: 400;font-size: 12px;color: #999999;line-height: 36px;">当天</div>
                                <div style="background: rgb(24, 144, 255,0.1);border-radius: 10px;width: 180px;height: 36px; text-align: center; line-height: 36px; color:#1890FF">企业查询</div>
                                <div style="padding: 20px 0 0 0; font-family: Microsoft YaHei;font-weight: 400;font-size: 12px;color: #999999;line-height: 36px;">最近半年</div>
                                <div class="list">
                                    <li>产业链分析</li>
                                    <li>项目分析</li>
                                </div>
                            </div>
                            
                        </el-col>
                        <el-col :span="21" style="background: #F2F9FF; padding: 20px 0 0 0;">
                            <el-row>
                                <el-col :span="20">
                                    <div class="chat">
                                        <div class="right">
                                            <div class="content">
                                                <div class="des">企业查询</div>
                                            </div>
                                            <div class="cl"></div>
                                        </div>
                                        <div class="left" style="">
                                            <div class="content">
                                                <div class="logo">logo</div>
                                                <div class="des">生物质能（Biomass Energy）是一种可再生能源，它源自于最近或过去的生物生命体，尤其是植物材料，通过光合作用捕获并存储太阳能。生物质可以包括木材、农作物、
                                                    城市固体废物、农业残留物、动物粪便、藻类以及专门种植的能源作物等。这种能源可以以多种形式被利用，例如：<br>
                                                    1.直接燃烧：这是最古老和最常见的生物质能利用方式，如木柴燃烧用于取暖或烹饪。 <br>
                                                    2.热解和气化：生物质可以通过缺氧条件下的热处</div>
                                            </div>
                                            <div class="cl"></div>
                                        </div>
                                        <div class="right">
                                            <div class="content">
                                                <div class="des">企业查询</div>
                                            </div>
                                            <div class="cl"></div>
                                        </div>
                                        <div class="left" style="">
                                            <div class="content">
                                                <div class="logo">logo</div>
                                                <div class="des">生物质能（Biomass Energy）是一种可再生能源，它源自于最近或过去的生物生命体，尤其是植物材料，通过光合作用捕获并存储太阳能。生物质可以包括木材、农作物、
                                                    城市固体废物、农业残留物、动物粪便、藻类以及专门种植的能源作物等。这种能源可以以多种形式被利用，例如：<br>
                                                    1.直接燃烧：这是最古老和最常见的生物质能利用方式，如木柴燃烧用于取暖或烹饪。 <br>
                                                    2.热解和气化：生物质可以通过缺氧条件下的热处</div>
                                            </div>
                                            <div class="cl"></div>
                                        </div>
                                        <div class="right">
                                            <div class="content">
                                                <div class="des">企业查询</div>
                                            </div>
                                            <div class="cl"></div>
                                        </div>
                                        <div class="left" style="">
                                            <div class="content">
                                                <div class="logo">logo</div>
                                                <div class="des">生物质能（Biomass Energy）是一种可再生能源，它源自于最近或过去的生物生命体，尤其是植物材料，通过光合作用捕获并存储太阳能。生物质可以包括木材、农作物、
                                                    城市固体废物、农业残留物、动物粪便、藻类以及专门种植的能源作物等。这种能源可以以多种形式被利用，例如：<br>
                                                    1.直接燃烧：这是最古老和最常见的生物质能利用方式，如木柴燃烧用于取暖或烹饪。 <br>
                                                    2.热解和气化：生物质可以通过缺氧条件下的热处</div>
                                            </div>
                                            <div class="cl"></div>
                                        </div>
                                        <div class="right">
                                            <div class="content">
                                                <div class="des">企业查询</div>
                                            </div>
                                            <div class="cl"></div>
                                        </div>
                                        <div class="left" style="">
                                            <div class="content">
                                                <div class="logo">logo</div>
                                                <div class="des">生物质能（Biomass Energy）是一种可再生能源，它源自于最近或过去的生物生命体，尤其是植物材料，通过光合作用捕获并存储太阳能。生物质可以包括木材、农作物、
                                                    城市固体废物、农业残留物、动物粪便、藻类以及专门种植的能源作物等。这种能源可以以多种形式被利用，例如：<br>
                                                    1.直接燃烧：这是最古老和最常见的生物质能利用方式，如木柴燃烧用于取暖或烹饪。 <br>
                                                    2.热解和气化：生物质可以通过缺氧条件下的热处</div>
                                            </div>
                                            <div class="cl"></div>
                                        </div>
                                    </div>
                                    <div class="send-box">
                                        <div class="upload"><el-icon><Upload /></el-icon></div>
                                        <div class="input">
                                            <el-input
                                                placeholder="请输入查询内容"
                                                :suffix-icon="Position"
                                            >
                                            </el-input>
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="4">
                                    <div class="instruct">
                                        <div class="title">指令中心</div>
                                        <div class="search">
                                            <el-input
                                                placeholder="搜索指令"
                                                :prefix-icon="Search"
                                                />
                                        </div>
                                        <div class="list">
                                            <li>
                                                <div class="icon"><el-icon color="#1890FF" size="20px"><Place /></el-icon></div>
                                                <div class="content">
                                                    <div class="title">产业链分析</div>
                                                    <div class="description">产业链，企业、项目最近信息...</div>
                                                </div>
                                                <div style="clear: both;"></div>
                                            </li>
                                            <li>
                                                <div class="icon"><el-icon color="#1890FF" size="20px"><Place /></el-icon></div>
                                                <div class="content">
                                                    <div class="title">招商项目</div>
                                                    <div class="description">产业链，企业、项目最近信息...</div>
                                                </div>
                                                <div style="clear: both;"></div>
                                            </li>
                                            <li>
                                                <div class="icon"><el-icon color="#1890FF" size="20px"><Place /></el-icon></div>
                                                <div class="content">
                                                    <div class="title">投资线索</div>
                                                    <div class="description">产业链，企业、项目最近信息...</div>
                                                </div>
                                                <div style="clear: both;"></div>
                                            </li>
                                            <li>
                                                <div class="icon"><el-icon color="#1890FF" size="20px"><Place /></el-icon></div>
                                                <div class="content">
                                                    <div class="title">企业分析</div>
                                                    <div class="description">产业链，企业、项目最近信息...</div>
                                                </div>
                                                <div style="clear: both;"></div>
                                            </li>
                                            <li>
                                                <div class="icon"><el-icon color="#1890FF" size="20px"><Place /></el-icon></div>
                                                <div class="content">
                                                    <div class="title">项目分析</div>
                                                    <div class="description">产业链，企业、项目最近信息...</div>
                                                </div>
                                                <div style="clear: both;"></div>
                                            </li>
                                            <li>
                                                <div class="icon"><el-icon color="#1890FF" size="20px"><Place /></el-icon></div>
                                                <div class="content">
                                                    <div class="title">企业线索</div>
                                                    <div class="description">产业链，企业、项目最近信息...</div>
                                                </div>
                                                <div style="clear: both;"></div>
                                            </li>
                                            <li>
                                                <div class="icon"><el-icon color="#1890FF" size="20px"><Place /></el-icon></div>
                                                <div class="content">
                                                    <div class="title">项目线索</div>
                                                    <div class="description">产业链，企业、项目最近信息...</div>
                                                </div>
                                                <div style="clear: both;"></div>
                                            </li>
                                            <li>
                                                <div class="icon"><el-icon color="#1890FF" size="20px"><Place /></el-icon></div>
                                                <div class="content">
                                                    <div class="title">企业尽调</div>
                                                    <div class="description">产业链，企业、项目最近信息...</div>
                                                </div>
                                                <div class="cl"></div>
                                            </li>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                </el-card>
            </div>
		</div>
	</div>
</template>

<script setup lang="ts" name="cgauctionLists">
import { defineAsyncComponent, reactive, ref, onMounted } from 'vue';
import { Plus,Search,Place,Position,Upload } from '@element-plus/icons-vue'


</script>

<style scoped lang="scss">
.send-box {
    width: 100%;
    padding: 20px 70px;

    .upload {
       width: 40px;
       height: 40px;
       border-radius: 50%;
       border: 1px solid #E6E6E6;
       background-color: #FFFFFF;
       text-align: center;
       line-height: 40px;
       float: left;
    }
    .input {
        float: left;
        margin-left: 20px;
        width: 90%;
        :deep(.el-input__wrapper) {
            border-radius: 20px;
            height: 40px;
            line-height: 40px;
        }
    }
}
.chat {
    width: 100%;
    max-height: 620px;
    overflow: auto;
    padding-bottom: 20px;
    .right {
        width: 100%; 
        .content {
            float: right; 
            padding: 5px 20px;
            .des {
                background-color: rgba(24, 144, 255, 0.7); 
                width: auto;
                color: #ffffff; 
                border-radius: 6px;
                padding: 10px 20px; 
            }
           
        }
    }
    .left {
        width: 100%; 
        .content {
            float: left; 
            padding: 5px 20px;
            .logo {
                width: 40px; 
                height: 40px; 
                border-radius: 20px; 
                background-color: #1769EA;
                line-height: 40px; 
                text-align: center; 
                color:#ffffff;
                float: left;
            }
            .des {
                margin-left: 50px; 
                background-color: #ffffff; 
                padding: 15px; 
                border-radius: 5px;
                font-size: 14px;
                line-height: 25px;
            }
        }
    }
}
.instruct {
    height: 100%;
    background: #FFFFFF;
    border-radius: 20px 0px 0px 0px;
    .title {
        padding: 10px 20px;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 16px;
    }
    .search {
        padding: 10px 20px;
        :deep(.el-input__wrapper) {
            border-radius: 20px;
            height: 30px;
            line-height: 30px;
        }
    }
    .list {
        padding:10px 20px;
        li {
            display: flex;
            list-style: none;
            margin-bottom: 15px;
            .icon {
                width: 45px;
                height: 40px;
                background: #E8F0FE;
                border-radius: 6px;
                text-align: center;
                line-height: 48px;
            }
            .content {
                padding-left: 10px;
                .title {
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 14px;
                    color: #000000;
                    height: 20px;
                    line-height: 20px;
                    padding: 0;
                }
                .description {
                    height: 20px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 12px;
                    line-height: 20px;
                    color: #999999;
                }
            }
        }
    }
}
.table-admin-container {
	.table-admin-padding {
		.table-admin {
			flex: 1;
			overflow: hidden;
		}
	}
}
.el-card{
    height: 100%;
}
.el-row{
    height: 100%;
}
.card-header{
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 16px;
    color: #010101;

}
.list {
    li{
        list-style: none;
        line-height: 36px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        color: #000000;
        line-height: 36px;
    }
}
.cl {
    clear: both;
}
</style>
